<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <el-card
      shadow="never"
      style="width: 100%; height: calc(100vh - 205px);"
    >
      <el-tabs
        v-model="activeName"
        class="aside-item"
        @tab-click="handleClick"
      >
        <!-- 基本信息页面 -->
        <el-tab-pane
          label="基本信息"
          name="first"
        >
          <el-card
            v-if="tableIndex === 1 && !infoFlag"
            :key="1"
          >
            <!-- 表单 -->
            <el-form
              ref="drivingInfoForm"
              :disabled="isDisabled"
              :class="{'info-form': isDisabled, 'edit-info': !isDisabled}"
              style="margin-left: 20px;"
              inline
              label-width="100px"
              :model="drivingInfoData"
            >
              <el-form-item
                label="员工编号："
              >
                <el-input
                  v-model="drivingInfoData.userId"
                  :disabled="!isDisabled"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="司机姓名："
              >
                <el-input
                  v-model="drivingInfoData.name"
                  :disabled="!isDisabled"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="所属机构："
                :class="{'edit-form': !isDisabled}"
              >
                <el-input
                  v-model="drivingInfoData.agency.name"
                  :disabled="!isDisabled"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="手机号："
              >
                <el-input
                  v-model="drivingInfoData.mobile"
                  :disabled="!isDisabled"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="年龄："
              >
                <el-input
                  v-model="drivingInfoData.age"
                  class="update"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
        <!-- 驾驶证信息页面 -->
        <el-tab-pane
          label="驾驶证信息"
          name="second"
        >
          <el-card
            v-if="tableIndex === 2 && !driverLicenseFlag"
            :key="2"
          >
            <!-- 预览展示form表单 -->
            <el-form
              disabled
              class="info-form"
              style="margin-left: 20px;"
              inline
              label-width="110px"
            >
              <el-form-item
                label="驾驶证号:"
              >
                <el-input :value="drivingPreviewForm.licenseNumber || '--'"></el-input>
              </el-form-item>
              <el-form-item
                label="准驾车型:"
              >
                <el-input :value="drivingPreviewForm.allowableType || '--'"></el-input>
              </el-form-item>
              <el-form-item
                label="初次领证日期:"
              >
                <el-input :value="drivingPreviewForm.initialCertificateDate || '--'"></el-input>
              </el-form-item>
              <el-form-item
                label="驾驶证有效期限:"
              >
                <el-input :value="drivingPreviewForm.validPeriod">
                  <span
                    slot="suffix"
                    style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 140px;
                      "
                  >年</span>
                </el-input>
              </el-form-item>
              <el-form-item
                label="驾龄:"
              >
                <el-input
                  :value="drivingPreviewForm.driverAge"
                >
                  <span
                    slot="suffix"
                    style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 140px;
                      "
                  >年</span>
                </el-input>
              </el-form-item>
              <el-form-item
                label="驾驶证类型:"
              >
                <el-input :value="drivingPreviewForm.licenseType || '--'"></el-input>
              </el-form-item>
              <el-form-item
                label="从业资格证:"
              >
                <el-input
                  :value="drivingPreviewForm.qualificationCertificate || '--'"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="入场证信息:"
              >
                <el-input :value="drivingPreviewForm.passCertificate || '--'"></el-input>
              </el-form-item>
              <el-form-item
                v-if="drivingPreviewForm.picture === null"
                label="图片信息"
                class="drivingPic"
              >
                <el-image
                  style="width: 212px; height: 160px;"
                  :src="imgUrl"
                  fit="fill"
                ></el-image>
              </el-form-item>
              <el-form-item
                v-else
                label="图片信息"
                class="drivingPic"
              >
                <el-image
                  v-for="(item, index) in drivingPreviewForm.picture"
                  :key="index"
                  style="width: 212px; height: 160px; margin-right: 20px;"
                  :src="item"
                  :preview-src-list="drivingPreviewForm.picture"
                  fit="fill"
                ></el-image>
              </el-form-item>
            </el-form>
          </el-card>
          <!-- 驾驶证信息编辑表单 -->
          <el-card
            v-else
          >
            <el-form
              class="edit-info"
              style="margin-left: 20px;"
              inline
              label-width="120px"
              :model="drivingPreviewForm"
            >
              <el-form-item
                label="驾驶证号:"
              >
                <el-input v-model="drivingPreviewForm.licenseNumber"></el-input>
              </el-form-item>
              <el-form-item
                label="准驾车型:"
              >
                <el-input v-model="drivingPreviewForm.allowableType"></el-input>
              </el-form-item>
              <el-form-item
                label="初次领证日期:"
                style="margin-bottom: 20px;"
              >
                <el-date-picker
                  v-model="drivingPreviewForm.initialCertificateDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="驾驶证有效期限:"
              >
                <el-input v-model="drivingPreviewForm.validPeriod">
                  <span
                    slot="suffix"
                    style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 14px;
                      "
                  >年</span>
                </el-input>
              </el-form-item>
              <el-form-item
                label="驾龄:"
              >
                <el-input
                  v-model="drivingPreviewForm.driverAge"
                >
                  <span
                    slot="suffix"
                    style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 14px;
                      "
                  >年</span>
                </el-input>
              </el-form-item>
              <el-form-item
                label="驾驶证类型:"
                style="margin-bottom: 20px;"
              >
                <el-input v-model="drivingPreviewForm.licenseType"></el-input>
              </el-form-item>
              <el-form-item
                label="从业资格证:"
              >
                <el-input
                  v-model="drivingPreviewForm.qualificationCertificate"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="入场证信息:"
              >
                <el-input v-model="drivingPreviewForm.passCertificate"></el-input>
              </el-form-item>
              <el-form-item
                label="图片信息"
                class="driving-picture"
              >
                <el-image
                  v-for="(item) in imgUrlDrivingList"
                  v-show="drivingExample"
                  :key="item"
                  style="width: 212px; height: 160px; margin-right: 20px;"
                  :src="item"
                  :preview-src-list="imgUrlDrivingList"
                  fit="fill"
                ></el-image>
                <el-upload
                  ref="drivingPictureUpload"
                  class="avatar-uploader"
                  action="https://slwl-api.itheima.net/manager/files/imageUpload"
                  list-type="picture-card"
                  :http-request="drivingUploadHandle"
                  :before-upload="beforeAvatarUpload"
                  :limit="2"
                  :file-list="drivingFileList"
                  :on-exceed="exceedsLimit"
                >
                  <i
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>
                  <div
                    slot="file"
                    slot-scope="{file}"
                  >
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <!-- 遮盖层预览 -->
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                      <!-- 遮盖层删除 -->
                      <span
                        class="el-upload-list__item-delete"
                        @click="drivingHandleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 基本信息的操作区域 -->
    <div
      v-show="tableIndex === 1"
      class="info-btn"
    >
      <div
        v-if="!basicInfoFlag"
        class="footer-btn-eidt"
      >
        <el-button @click="editDriver">编辑</el-button>
      </div>
      <div
        v-else
        class="footer-btn"
      >
        <el-button
          class="save-btn"
          @click="submitInfoFn"
        >保存</el-button>
        <el-button
          class="cancel-btn"
          @click="cancelInfoFn"
        >取消</el-button>
      </div>
    </div>
    <!-- 驾驶证信息的操作区域 -->
    <div
      v-show="tableIndex === 2"
      class="info-btn"
    >
      <div
        v-if="!driverLicenseFlag"
        class="footer-btn-eidt"
      >
        <el-button @click="editDriverLicense">编辑</el-button>
      </div>
      <div
        v-else
        class="footer-btn"
      >
        <el-button
          class="save-btn"
          @click="submitLicenseFn"
        >保存</el-button>
        <el-button
          class="cancel-btn"
          @click="cancelLicenseFn"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  driverDetail,
  driverDetailUpdate,
  driverLicenseDetail,
  imgUpload,
  driverLicenseDetailUpdate
} from '@/api/transit'
export default {
  data() {
    return {
      activeName: 'first',
      tableIndex: 1,
      infoFlag: false,
      driverLicenseFlag: false,
      basicInfoFlag: false,
      isDisabled: true,
      // 基本信息表单数据
      drivingInfoData: {
        userId: '',
        name: '',
        agency: { name: '' },
        mobile: '',
        age: ''
      },
      imgUrl: require('@/assets/empty-img.png'),
      // 驾驶证信息表单数据
      drivingPreviewForm: {
        licenseNumber: '',
        allowableType: '',
        initialCertificateDate: '',
        validPeriod: '',
        driverAge: '',
        licenseType: '',
        qualificationCertificate: '',
        passCertificate: '',
        picture: ''
      },
      imgUrlDrivingList: [require('@/assets/jiashizhengzhuye.png'), require('@/assets/jiashizhengfuye.png')],
      drivingExample: true,
      drivingFileList: [],
      drivingUploadPicture: []
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created() {
    this.getDriverInfo()
  },
  methods: {
    // tab切换
    handleClick(tab, event) {
      if (tab.$options.propsData.name === 'second') {
        this.getDriverLicense()
        this.tableIndex = 2
      } else if (tab.$options.propsData.name === 'first') {
        this.tableIndex = 1
      }
      console.log(this.tableIndex)
    },
    // 基本信息点击编辑按钮
    editDriver() {
      this.isDisabled = false
      this.basicInfoFlag = true
    },

    // 获取司机的基本信息数据
    async getDriverInfo() {
      const res = await driverDetail(this.id)
      this.drivingInfoData = res.data
    },
    // 基本信息提交
    async submitInfoFn() {
      const data = {
        age: this.drivingInfoData.age,
        agency: this.drivingInfoData.agency,
        mobile: this.drivingInfoData.mobile,
        name: this.drivingInfoData.name,
        userId: this.drivingInfoData.userId
      }
      const res = await driverDetailUpdate(this.id, data)
      console.log(res)
      if (res.code !== 200) {
        this.$message.error('保存失败！')
        return
      }
      this.$message.success('保存成功！')
      this.basicInfoFlag = false
      this.isDisabled = true
      this.getDriverInfo()
    },

    // 基本信息取消保存
    cancelInfoFn() {
      this.basicInfoFlag = false
      this.isDisabled = true
    },
    // 驾驶证模块
    // 根据id获取驾驶证信息
    async getDriverLicense() {
      const res = await driverLicenseDetail(this.id)
      console.log(res)

      this.drivingPreviewForm = res.data
      if (this.drivingPreviewForm.picture !== null) {
        this.drivingExample = false
        this.drivingPreviewForm.picture = this.getVehiclePic(this.drivingPreviewForm.picture)
        this.drivingFileList = []
        this.drivingPreviewForm.picture.forEach(item => {
          this.drivingFileList.push({
            url: item
          })
        })
      } else {
        this.drivingExample = true
      }
      // this.drivingPreviewForm.picture = this.getVehiclePic(this.drivingPreviewForm.picture)
    },
    // 对后端返回的图片进行格式转换
    getVehiclePic(imgUrl) {
      const imgArr = []
      const list = imgUrl.split(',')
      list.forEach((item) => {
        imgArr.push(item)
      })
      return imgArr
    },
    // 驾驶证信息点击编辑按钮
    editDriverLicense() {
      this.driverLicenseFlag = true
    }, // 驾驶证信息提交
    async submitLicenseFn() {
      if (this.$refs.drivingPictureUpload.uploadFiles.length <= 1) {
        this.$message.error('行驶驶证必须上传两张')
        return
      }
      let pic = ''
      if (this.drivingUploadPicture.length <= 0) {
        for (const key in this.drivingFileList) {
          pic = pic + this.drivingFileList[key].url + ','
        }
        pic = pic.slice(0, -1)
      }
      const data = {
        allowableType: this.drivingPreviewForm.allowableType,
        driverAge: this.drivingPreviewForm.driverAge,
        id: this.drivingPreviewForm.id,
        initialCertificateDate: this.drivingPreviewForm.initialCertificateDate,
        licenseNumber: this.drivingPreviewForm.licenseNumber,
        licenseType: this.drivingPreviewForm.licenseType,
        passCertificate: this.drivingPreviewForm.passCertificate,
        picture: this.drivingUploadPicture.join(',') || pic,
        qualificationCertificate: this.drivingPreviewForm.qualificationCertificate,
        userId: this.drivingPreviewForm.userId,
        validPeriod: this.drivingPreviewForm.validPeriod
      }
      const res = await driverLicenseDetailUpdate(data)
      console.log(res)
      if (res.code !== 200) {
        this.$message.error('更新失败！')
        return
      }
      this.$message.success('保存成功！')
      this.driverLicenseFlag = false
      this.getDriverLicense()
    },
    // 驾驶证信息取消保存
    cancelLicenseFn() {
      this.driverLicenseFlag = false
    },
    // 图片上传
    async drivingUploadHandle(uploadFile) {
      this.drivingExample = false
      const theFile = uploadFile.file
      const fd = new FormData()
      fd.append('file', theFile)
      const res = await imgUpload(fd)
      this.drivingUploadPicture.push(res.data)
    },
    // 图片上传之前校验
    beforeAvatarUpload(file) {
      const list = ['image/jpeg', 'image.png', '']
      const isJPG = list.includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    // 超出限制
    exceedsLimit(files, fileList) {
      this.$message.error('文件上传超出限制数量！')
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 驾驶证信息删除图片
    drivingHandleRemove(file) {
      const uploadFiles = this.$refs.drivingPictureUpload.uploadFiles
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] === file.url) {
          uploadFiles.splice(i, 1)
          this.drivingUploadPicture.splice(i, 1)
        }
        if (!uploadFiles[0]) {
          this.drivingExample = true
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.driver-detail {
  padding: 20px;
    ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
  ::v-deep .footer-btn-eidt {
  // padding-top: 24px;
  background-color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  border-top: 1px solid #E5E7ED ;
  .el-button {
    width: 110px;
    height: 40px;
    background-color: #e15536;
    color: #fff;
  }
 }
 ::v-deep .el-tabs__active-bar {
    background-color:#E15536 ;
    height: 3px;
    width: 49px;
    margin: 0 auto;
  }
  .el-tabs__item {
    font-size: 14px;
    color: #000;
  }
  ::v-deep .el-tabs__item:hover {
    color: #000;
  }
  ::v-deep .is-active {
    font-size: 16px;
    font-weight: bold;
    color: #20232A;
  }
  #tab-first {
    padding-left: 20px;
  }
  #tab-second {
    padding-left: 40px;
  }
  ::v-deep .info-form {
    .el-form-item {
    width: 470px;
    padding-right: 45px;
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-weight: normal;
    padding-right: 0;
    text-align: left;
  }
  .el-input__inner {
    background-color: #fff;
    border: none;
    color: #20232a;
    height: 20px;
  }
  .drivingPic {
    width: 1000px;
    margin-left: 10px;
    .el-form-item__label {
      margin-right: 20px;
    }
    .el-form-item__content {
      margin-top: 10px;
      .el-image {
        border: 1px solid #d8dde3;
      }
    }
  }
  }
  .edit-form {
    margin-bottom: 20px !important;
  }
  ::v-deep .edit-info {
    .el-form-item {
    width: 470px;
    padding-right: 45px;
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-weight: normal;
    text-align: left;
  }
  .el-input__inner {
    border-color: #E4E7ED;
    height: 40px;
    width: 214px;
  }
  .update .el-input__inner {
    color: #20232a;
  }
  .driving-picture {
    display: flex;
    width: 1000px;
    .el-form-item__label {
      padding-left: 10px;
    }
    .el-form-item__content {
      display: flex;
      margin-top: 14px;
      .el-image {
        border: 1px solid #d8dde3;
      }
      .el-upload-list__item {
        margin-right: 20px;
      }
      .el-upload-list__item div {
        width: 146px;
        height: 146px;
      }
    }
  }
  }
 ::v-deep .footer-btn {
  background-color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  border-top: 1px solid #E5E7ED ;
  .save-btn{
    width: 110px;
    height: 40px;
    background-color: #e15536;
    border: 1px solid #e15536;
    color: #fff;
    }
  .save-btn:hover{
    background-color: #ffab98;
    border: 1px solid #ffab98;
  }
  .cancel-btn {
    width: 110px;
    height: 40px;
    color: #e15536;
    border: 1px solid #e15536;
    background-color: #ffeeeb;
  }
  .cancel-btn:hover {
    background-color: #e15536;
    color: #fff;
  }
 }
}
</style>
